import React from 'react';
import logo from './logo.svg';
import ShoppingList from './ShoppingList';
import LikeButton from './LikeButton';
import Counter from './Counter';
import Parent from './Parent';

import './App.css';
let name = 'Hi zhang san ';
const dog = {
  name : 'li si',
  age: '4',
  color: 'white'
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/*<img src={logo} className="App-logo" alt="logo" />*/}
        <p>
          Edit <code>src/App.js</code> and save to reload.
            this is a test {name}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn
        </a>
        <p>
          name = {dog.name} age = {dog.age} color = {dog.color}
        </p>

      </header>

      <ShoppingList name={'wang wu'} messages = {'hello this is a new message'}>
      </ShoppingList>
      <LikeButton></LikeButton>

        <Counter></Counter>
        <Parent>

        </Parent>
    </div>
  );
}

export default App;
